<!-- 首页地区子组件 -->
<template>
    <div class="region">
        <div class="content">
            <div class="left">地区：</div>
            <ul>
                <li :class="{ active: RegionFlag == '' }" @click="changeRegion('')">全部</li>
                <li v-for="item in RegionArr" :class="{ active: RegionFlag == item.value }" :key="item.value"
                    @click="changeRegion(item.value)">{{ item.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
//引入请求方法
import { reqHospitalLevelAndRegion } from '@/api/home/index'
import { onMounted, ref } from 'vue';
import type { HospitalLevelAndRegionArr, HospitalLevelAndRegionResponseData } from '@/api/home/type'

//存储地区的数据
let RegionArr = ref<HospitalLevelAndRegionArr>([]);
//地区高亮的响应式数据
let RegionFlag = ref<string>('')

//地区组件挂载完毕获取地区数据
onMounted(() => {
    getRegion()
})

//获取地区的数据
const getRegion = async () => {
    let result: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('Beijin');
    if (result.code == 200) {
        RegionArr.value = result.data
    }
    // console.log(result);

}

//点击不同区域地区的按钮回调
const changeRegion = (region: string) => {
    RegionFlag.value = region
    $emit('getRegion',region)
}

const $emit = defineEmits(['getRegion'])
</script>

<!--v2 为了开发者工具可以看到 组件命名-->
<!-- <script setup lang="ts">
export default {
    name:'Region'
}
</script> -->

<style lang="scss" scoped>
.region {
    color: #7f7f7f;
    margin-top: 10px;

    .content {
        display: flex;

        .left {
            margin-right: 10px;
            white-space: nowrap; //不换行
        }

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin-right: 10px;
                margin-bottom: 10px;

                &.active {
                    color: #55a6fe
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }

}
</style>